<template>
    <div class="choose-year">
        <el-calendar v-model="value" />
        <el-row justify="end" align="middle" class="footer">
            <el-button type="primary" class="btn" @click="handleClick('confirm')">确定</el-button>
            <el-button class="btn" @click="handleClick('cancel')">取消</el-button>
        </el-row>
    </div>
</template>

<script setup>
    import { ref, defineEmits, watch } from 'vue'
    import dayjs from 'dayjs'

    let value = ref(new Date())
    const emit = defineEmits(['setShowTimeLine', 'setSelectDate'])

    watch(value, (nval) => {
        emit('setSelectDate', dayjs(nval))
    })

    function handleClick(action) {
        emit('setShowTimeLine')
    }
</script>

<style lang="less" scoped>
    @import url('@/common.less');
    .choose-year {
        .footer {
            margin: auto;
            padding-right: 20px;
            .btn {
                width: 100px;
            }
        }
    }
</style>
